<template>
  <a-modal v-model:visible="visible" width="70vw" @cancel="handleCancel" modal-class="VideoPlayer" unmount-on-close>
    <div class="video-player-wrapper">
      <div class="tool-bar flex items-center justify-end">
        <div class="close-icon" @click="handleCancel">
          <icon-close-circle />
          <span style="margin-left: 5px">关闭</span>
        </div>
      </div>
      <div class="video-content">
        <div ref="playerRef"></div>
      </div>
    </div>
  </a-modal>
</template>

<script setup name="VoideoPlayer">
  import { ref, nextTick } from 'vue'
  import Player from 'xgplayer'

  const visible = ref(false)
  const handleCancel = () => {
    visible.value = false
  }
  const playerRef = ref()
  const open = (playUrl) => {
    visible.value = true
    nextTick(() => {
      new Player({
        el: playerRef.value,
        url: playUrl,
        playbackRate: [0.5, 0.75, 1, 1.5, 2],
        defaultPlaybackRate: 1,
        fluid: true,
        videoInit: true,
      })
    })
  }

  defineExpose({
    open,
  })
</script>

<style lang="less" scoped>
  .video-player-wrapper {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    .tool-bar {
      height: 40px;
      background: #2c2c2c;
      .close-icon {
        font-size: 12px;
        color: #ffffff;
        cursor: pointer;
        padding: 0 20px;
      }
    }
    .video-content {
      height: calc(100% - 40px);
    }
  }
</style>
<style lang="less">
  .VideoPlayer {
    .arco-modal-header,
    .arco-modal-footer {
      display: none;
    }
    .arco-modal-body {
      width: 100%;
      padding: calc(56.25% + 40px) 0 0 0;
      position: relative;
    }
  }
</style>
